import classnames from 'classnames';
import React, { useMemo } from 'react';
import styles from './style.module.less';

export interface ICardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
  title?: React.ReactNode;
  level?: 1 | 2 | 3 | 4 | 5 | 6;
  className?: string;
  classNames?: {
    title?: string
  }
}
export function Card(props: ICardProps) {
  const { title, children, level, className, classNames = {}, ...rootProps } = props;
  const { title: classname_title } = classNames
  const ele_title = useMemo(() => {
    const tag_name = level !== void 0 ? 'h' + level : 'span'
    return React.createElement(tag_name, { className: classname_title }, title);
  }, [level, classname_title, title]);
  return (
    <div className={classnames(styles.card_view, className)} {...rootProps}>
      <div className={styles.title_row}>
        {ele_title}
      </div>
      {children}
    </div>
  );
}